<template>
    <!-- 防伪系统 -->
    <div class="boxs margin_top">
        <headers :pageindex="2"></headers>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in photo" :key="index">
                    <img class="swiperimg" :src="item.img" alt="" />
                </div>
            </div>
            <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
        </div>
        <!-- v-if="!ismobile" -->
        <div class="width1300 " :class="!ismobile ? 'ispc' : 'ismobiles'">
            <div class="bigtitle">防伪系统</div>
            <div class="btnlist">
                <div class="shouzhi bounceIn animated wow bluebtn" @click="findgo">进入防伪查询</div>
                <div class="shouzhi bounceIn animated wow bluebtn" @click="gohoutai">进入管理后台</div>
            </div>
            <div class="bigtitle tops animated wow  bounceInDown">防伪标签定制</div>
            <div class="list">
                <div v-for="(item, index) in list" :key="index" class="animated"
                    :class="index == 0 ? ' wow bounceInLeft' : (index == 1 ? ' wow bounceIn' : ' wow bounceInRight')">
                    <div class="bgcolor">
                        <img :src="item.img" />
                        <div>{{ item.title }}</div>
                        <div>
                            {{ item.zititle }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="btnmore shouzhi animated wow bounceInUp" @click="getmore">了解更多</div>

        </div>

        <div class="content" :class="!ismobile ? 'ispc' : 'ismobiles'">
            <div class="bigtitle tops animated wow  bounceInUp">防伪标签使用方式及营销策略</div>

            <div class="width1300 paddings contentbox">
                <div class="li animated wow " v-for="(item, index) in celue"
                    :class="!ismobile ? (index == 0 || index == 3 ? 'bounceInLeft' : (index == 2 || index == 5 ? 'bounceInRight' : (index == 1 ? 'bounceInDown' : 'bounceInUp'))) : (index % 2 == 1 ? 'bounceInLeft' : 'bounceInRight')">
                    <div class="centerbox">
                        <div class="yuan" :style="'background:' + item.color">
                            <span class="tubiao iconfont " :class="item.icon"> </span>
                        </div>
                        <div class="title">{{ item.title }}</div>
                        <div class="zititle">{{ item.zititle }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="!ismobile ? 'ispc' : 'ismobiles'">
            <div class="blues">
                <div class="animated wow bounceInDown ">邀星防伪，一物一码防伪、追溯、DIY定制服务商</div>
                <div class="animated wow bounceInUp  shouzhi bluebtn" @click="apply">申请体验</div>
            </div>
        </div>
        <bottoms></bottoms>
    </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
        titleline
    },
    data() {
        return {
            ismobile: false,
            photo: [],
            celue: [{
                color: "#eec64a",
                icon: "icon-erweima",
                title: "二维码营销",
                zititle: "通过微信、支付宝、浏览器等工具扫一扫入口，实现发红包、发积分、发购物券、发礼品等营销活动，还支持各种只能精准策略！"
            }, {
                color: "#009aff",
                icon: "icon-dingwei",
                title: "防窜货追溯",
                zititle: "通过为每个产品赋予一物一码属性，大中小包装数据关联，实现出入库扫码发货，记录每一个产品的发货信息，最终实现扫码即追踪精准进销"
            }, {
                color: "#0cc081",
                icon: "icon-chanpinzhuisuchaxun",
                title: "产品溯源",
                zititle: "为每一个产品赋予一个唯一的身份识别码，将产品的原料、生产过程、产地、介绍等信息关联到每一个溯源码上，实现消费者扫码即可查看了解"
            }, {
                color: "#0d3cde",
                icon: "icon-shangcheng",
                title: "商城体系",
                zititle: "积分商城：消费者通过二维码营销、互动游戏等场景获得积分，积分累积都一定数量，可以在积分商城兑换礼品，礼品支持自有，也支持第三方"
            }, {
                color: "#33bed2",
                icon: "icon-mendiandianchang",
                title: "门店新零售",
                zititle: "支持给每个实体门店分配一个自己的线上店铺，消费者在线购买后可给相应门店返利，门店拥有自己店铺的独立管理后台。"
            }, {
                color: "#d33682",
                icon: "icon-youxi",
                title: "互动游戏",
                zititle: "可创建签到、大转盘、刮刮乐、消消乐、集字、等互动抽奖游戏，支持与二维码营销打通，让扫码更好玩，还可以直接使用积分玩游戏。"
            }],
            list: [
                { title: "防伪标签制作", img: require("../assets/images/1s.png"), zititle: "综合激光、隐形码、版纹、荧光、二维码等多种防伪技术，定制专属防伪设计方案，杜绝仿冒防伪标签" },
                { title: "防伪码制作", img: require("../assets/images/2s.png"), zititle: "在一物一码防伪（可关注公众号）基础上，通过独家研发的特殊外观防伪二维码，识别极容易，仿冒难度极大" },
                { title: "拓展性更强", img: require("../assets/images/3s.png"), zititle: "防伪的同时，积分、抽奖，溯源，防窜货，满足多种企业需求。支持一体化防伪包材，喷码，标签多种部署方式" }
            ],
            video: {}
        }
    },
    methods: {
        getmore() {
            console.log(this.video)
            window.open(this.video[0].en_name)
        },
        // 获取主推视频
        get_video() {
            this.$api.get(
                "/api/PortalHome/get_notice",
                {
                    notice_type: 4
                },
                (r) => {
                    this.video = r.DATA
                },
                (f) => { }
            );
        },
        gohoutai() {
            window.open("http://admin.yaoxinggongzuoshi.com/", '_blank')
        },
        findgo() {
            this.$router.push({ path: '/find_anti_fake' })
        },
        apply() {
            this.$router.push({ path: '/experience' })
        }
    },
    created() {
        this.get_video()
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });

        //第一种写法，可以设置wow中属性
        this.$nextTick(() => {
            // 在dom渲染完后,再执行动画
            var wow = new WOW({
                boxClass: "wow", ///动画元件css类（默认为wow）
                animateClass: "animated", //动画css类（默认为animated）
                offset: 50, //到元素距离触发动画（当默认为0）
                mobile: true, //在移动设备上触发动画（默认为true）
                live: true, //对异步加载的内容进行操作（默认为true）
            });
            wow.init();
        });

        // 顶部轮播图
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                dynamicMainBullets: 2,
                clickable: true,
            },
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tubiao {
    text-align: center;
    font-size: 2.5rem;
    color: white;
    display: block;
    line-height: 80px;
}

.blues {
    color: white;
    background-color: #2432d2;
    padding: 80px 0;
    overflow: hidden;

    >div:nth-child(1) {
        font-size: 50px;
        text-align: center;
    }

    >div:nth-child(2) {
        font-size: 20px;
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        text-align: center;
        border-radius: 10px;
        margin-top: 30px;
    }
}

.paddings {
    padding: 50px 0;
}

.contentbox {
    >.li {
        float: left;
        width: 33.33%;
        margin-top: 70px;

        >.centerbox {
            width: 90%;
            margin: 0 auto;
            box-shadow: 1px 2px 19px -6px rgba(0, 0, 0, .16);
            background: white;
            padding: 0 40px;
            box-sizing: border-box;
            padding-bottom: 30px;
            min-height: 285px;

            >.yuan {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background: yellow;
                margin: 0 auto;
                transform: translateY(-30px);

            }

            >.title {
                font-size: 25px;
                text-align: center;
                font-weight: bold;
                color: #404040;
            }

            >.zititle {
                font-size: 17px;
                text-align: center;
                margin-top: 20px;
                line-height: 30px;
                color: #404040;
            }
        }
    }
}

.content {
    padding: 30px;
    background-color: rgba(217, 243, 255, .34);
}

.btnmore {
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #009aff;
    color: white;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 100px;
}

.list {
    overflow: hidden;
    margin-top: 50px;

    >div {
        width: 33.33%;
        float: left;
    }

    .bgcolor {
        background-color: #009aff;
        color: white;
        margin: 0 auto;
        width: 90%;
        padding: 60px 30px;

        img {
            display: block;
            margin: 0 auto;
            width: 80px;
            border-radius: 0.6rem
        }

        >div:nth-child(2) {
            color: white;
            font-size: 27px;
            margin-top: 22px;
            font-weight: bold;
            text-align: center;
        }

        >div:nth-child(3) {
            color: white;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
            margin-top: 22px;
        }
    }

}

.tops {
    margin-top: 3rem;
}

.btnlist {
    width: 35%;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 1.5rem;

    >div {
        width: 45%;
        height: 60px;
        border-radius: 9px;
        color: white;
        text-align: center;
        line-height: 60px;
    }

    >div:nth-child(1) {
        float: left;
    }

    >div:nth-child(2) {
        float: right;
    }

    // >div:hover {
    //     background-color: #498ab5;
    //     background-clip: padding-box;
    //     border-color: #000;
    // }
}



.bigtitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.ismobiles {
    .paddings {
        padding-top: 0px;
    }

    .bigtitle {
        text-align: center;
        font-size: 1.2rem !important;
        font-weight: bold;
        margin-top: 2rem;
    }

    .blues {
        padding: 2rem 2rem !important;

        >div:nth-child(1) {
            font-size: 1.4rem;
        }

        >div:nth-child(2) {
            font-size: 1rem !important;
            width: 7rem;
            height: 2.4rem;
            line-height: 2.4rem;
            margin: 0 auto;
            text-align: center;
            border-radius: 10px;
            margin-top: 1.2rem;

        }
    }

    .centerbox {
        .yuan {
            width: 5rem !important;
            height: 5rem !important;
            line-height: 70px;
            transform: translateY(-2.5rem) !important;
        }

        .title {
            font-size: 1.4rem !important;
            margin-top: -1.6rem;
        }

        .zititle {
            font-size: 1.2rem !important;
            line-height: 2rem !important;
        }
    }

    .contentbox {
        margin: 0 auto;
        float: none;

        >.li {
            float: none;
            margin: 0 auto;
            width: 100%;
            margin-top: 5rem;
        }

    }

    .btnlist {
        width: 66%;
        margin-top: 1rem;

        >div {
            width: 48%;
            height: 2.2rem !important;
            border-radius: 9px;
            color: white;
            font-size: 0.8rem;
            text-align: center;
            line-height: 2.2rem !important;
        }
    }

    .btnmore {
        font-size: 1rem;
        width: 8rem;
        height: 2.6rem;
        line-height: 2.6rem;
        margin-bottom: 3rem;
        margin-top: 0.8rem;
    }


    .list {
        margin-top: 0rem;

        >div {
            width: 90%;
            margin: 0 auto;
            float: none;
            margin-top: 2rem;
        }


        .bgcolor {
            width: 94%;
            margin: 0 auto;
            padding: 2rem 1rem;

            img {
                display: block;
                margin: 0 auto;
                width: 5rem;
            }

            >div:nth-child(2) {
                color: white;
                font-size: 1.2rem;
                margin-top: 22px;
                font-weight: bold;
                text-align: center;
            }

            >div:nth-child(3) {
                color: white;
                font-size: 1rem;
                line-height: 1.5rem;
                text-align: center;
                margin-top: 0.5rem;
            }
        }

    }
}


@media (max-width: 3300px) {}

@media (max-width: 1120px) {}

@media (max-width: 1000px) {}

.boxs {
    width: 100%;
    // max-width: 1300px;
    // margin: 0 auto;
    // overflow: hidden;
}

@media (max-width: 3300px) {
    .margin_top {
        margin-top: 110px;
    }

}

@media (max-width: 1120px) {}

@media (max-width: 1000px) {
    .margin_top {
        margin-top: 0px;
    }
}
</style>
